<template>
	<div class="jl-row1">
		<div class="wp">
			<div class="jl-about1 sty2">
				<div class="jl-tit1">
					<div class="tit">作者创作中心</div>
				</div>
				<ul class="jl-tab1">
					<li v-for="(item, index) in options.list1" :key="index" :class="options.actNum == index ? 'on' : ''">
						<NuxtLink :to="item.link" class="btn">{{ item.tit }}</NuxtLink>
					</li>
				</ul>
			</div>
			<div class="jl-about2">
				<div class="lbox">
					<div class="m-choosel jl-choosel">
						<a-collapse v-model:activeKey="activeKey" expand-icon-position="right" :bordered="false" ghost>
							<a-collapse-panel v-for="(item,index) in list"  :header="item[0].group">
								<div  v-for="(item1,index) in item" class="jl-nav">
									<div @click="selectObj=item1"  :class="selectObj.id==item1.id?'v1 act':'v1'">{{ item1.ask }}</div>
								</div>
							</a-collapse-panel>
						</a-collapse>
					</div>
				</div>
				<div class="rbox">
					<div class="jl-tit2">{{ selectObj.ask }}</div>
					<div class="jl-info1" v-html="selectObj.answer">
						
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue';
import request from '~/services/request'
import { message } from 'ant-design-vue';
import { RouterLink, RouterView, useRouter } from 'vue-router'
const router = useRouter()
const options = reactive({
	actNum: 2,
	list1: [{
		tit: '我的作品',
		link: '/myWorks'
	},
	{
		tit: '作品收益',
		link: '/incomeFromWorks'
	},
	{
		tit: '帮助中心',
		link: '/helpCenter'
	},
	],

});
const selectObj=ref({})
const activeKey = ref(['0', '1', '2', '3']);
const list = ref([])
onMounted(() => {
	request.get_help({take:99999}).then(res => {
		const groupedData = res.results.reduce((result, item) => {
			if (!result[item.group]) {
				result[item.group] = [];
			}
			result[item.group].push(item);
			return result;
		}, {});
		list.value = Object.values(groupedData);
		selectObj.value=list.value[0][0]
	})
})
</script>

<style></style>